<template>

  <el-row>
    <div style="padding-top: 10px;margin-bottom: 10px;margin-left: 35px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="go"> <Icon type="md-close" />关闭</el-button>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="show"
      :modal-append-to-body="true"
      title="选择脚本"
      width="65%"
      top="10vh"
    >
      <div style="min-height: 350px">
        <el-row class="margin:30px;">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @row-click="rowClick"
            >
              <el-table-column label width="35" fixed>
                <template slot-scope="scope">
                  <el-radio :label="scope.row.id" v-model="scriptId">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column
                label="序号"
                type="index"
                width="50"

                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>


              <el-table-column
                prop="name"
                label="名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="category"
                label="脚本类型"
                show-overflow-tooltip

              >
              </el-table-column>
              <el-table-column
                prop="memo"
                label="备注"
                show-overflow-tooltip
              >
              </el-table-column>

            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total">
          </el-pagination>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmDialog">确 定</el-button>
    <el-button @click="show = false">取 消</el-button>

  </span>
    </el-dialog>
    <div style="display: block;" class="main-div">


        <el-col :span="8" v-for="(item,index) in tableNodeData" :key="index">
          <Card style="margin-left: 20px;margin-bottom: 10px">
            <p slot="title">{{item.name}}</p>
            <el-form ref="addForm" :model="addForm" label-width="120px" style="display: block">
              <el-form-item label="是否开启">
                <el-checkbox-group v-model="item.enable">
                  <el-checkbox label="completed" name="type">是</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </Card>
        </el-col>

    </div>


  </el-row>


</template>

<script>
  import {getAllActivityAndBackModel, saveModelBusSequence,saveNodeBackModel} from "@/api/busModel";
  import {getScript, getScriptType, executeScript, saveScript, removeScript, getScriptById} from "@/api/analy";

  export default {
    name: 'Task',
    components: {},
    data() {

      return {
        queryForm: {
          script: "",
          nameOrCategory: "",
          page: 1,
          pageSize: 10,
          limit: 10,
        },
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高
            initialFrameWidth: null,
            initialFrameHeight: 350
          }
        },
        addModel: false,
        scriptId: '',
        scriptInfo:{},
        addForm: {
          id: "",
          nodeName: "",
          emailContent: "",
        },
        batchForm: {
          id: "",
          type: [],
          emailContent: "",
        },
        tableData: [],
        tableNodeData: [],
        existData: [],
        msgData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        show: false,
        index: 0,
        existData: []
      }
    },
    mount() {

    },
    created() {
      // this.getData()
      var query = this.$route.query;
      this.addForm.id = query.id;
      if (query.id) {
        //初始化数据
        this.getAllActivityAndSequence(query.id)

      }
    },
    methods: {
      rowClick(row){
        this.scriptId=row.scriptId;
        this.scriptInfo=  row;
      },
      confirmDialog: function(data) {

        var scriptId= this.scriptId
        this.tableNodeData[this.index].skipExpress=this.scriptInfo.script
        this.show=false
      },
      handleCurrentChange(val) {

        this.queryForm.page = val
        this.getData()
      },
      getData:function(){
        getScript(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);
          this.checkTableData = [];
        })
      },

      delCommonUsers: function(index,index2) {
        this.index=index2;
        this.handleCurrentChange(1)
        this.show=true
      },
      selectAddSignUsers:function(index){
        this.index=index
        try {
          var node=  this.tableData[this.index]
          if(node.activeName=='created'){
            this.existData=node.userCreatedNotify
          }else{
            this.existData=node.userCompletedNotify
          }
        }catch (e) {
          this.existData=[]
        }
        this.show = true
      },
      onSubmit: function () {
      },
      chooseBatch: function (type) {
        var flag = false;
        var exist = this.batchForm.type;
        if (exist.length == 0) {

        } else {
          if (exist.includes(type)) {
            console.log("选中");
            flag = true;

          } else {
          }
        }
        this.tableData.forEach((item, index, array) => {
          //执行代码
          if (type == 'enable') {
            item['enable'] = flag
          }
          if (type == 'emailCompleted') {
            item['emailCompleted'] = flag
          }
          if (type == 'msgCreated') {
            item['msgCreated'] = flag
          }
          if (type == 'msgCompleted') {
            item['msgCompleted'] = flag
          }
          if (type == 'created') {
            if (flag) {
              item['eventTypes'].push('created')
            } else {
              var index = item['eventTypes'].indexOf('created');
              if (index > -1) {
                item['eventTypes'].splice(index, 1);
              }
            }
          }
        })


      },
      getAllActivityAndSequence: function (id) {
        getAllActivityAndBackModel(id).then((response2) => {
          if (response2.code == 0) {
            var data = response2.data;
            this.tableNodeData = data;
          }
        })


      },
      go: function () {
        this.$router.go(-1)
      },
      close: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
// 返回上一步路由
        this.$router.go(-1)
      },
      save: function () {
        saveNodeBackModel(this.addForm.id,this.tableNodeData).then((response2) => {
          if (response2.code == 0) {

            this.close();
          }
        })
      },

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .input_w {
    width: 40% !important;
  }

  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    margin-top: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

</style>
